<template>
  <div class="hezi">
    <div class="annius">
      <el-button type="primary" icon="el-icon-plus" @click="xinjian">新建</el-button>
      <el-button icon="el-icon-minus" @click="shanc">删除</el-button>
      <el-button type="primary" @click="shaxin">刷新</el-button>
      <el-button type="primary" class="anniu-a" @click="daoru">导入托盘</el-button>
    </div>
    <el-dialog :visible.sync="xiazai">
      <el-button type="primary" @click="shangchuan"><input ref="excel-upload-input" type="file" accept=".xlsx, .xls" @change="shangc"></el-button>
      <el-button type="primary" @click="xiazaimoban">下载模板表</el-button>
    </el-dialog>
    <div class="annius xiala">
      <el-input v-model="searchValue" placeholder="托盘名称/编码" class="bianhao" />
      <el-input v-model="typeinput" placeholder="类型名称/编码" class="bianhao" />
      <el-button type="primary" style="margin-left: 10px;" @click="chaxun">查询</el-button>
      <el-button @click="chongzhi">重置</el-button>
    </div>
    <div class="biaoge">
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="list"
        border
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          label="托盘号"
          width="220"
        >
          <template slot-scope="scope">{{ scope.row.Code }}</template>
        </el-table-column>
        <el-table-column
          prop="Name"
          label="托盘名称"
          width="220"
        >
          <template v-slot="{row}">{{ row.Name }} </template>
        </el-table-column>
        <el-table-column
          prop="Type"
          label="托盘类型"
          show-overflow-tooltip
          width="220"
        ><template v-slot="{row}">{{ row.PB_TrayType.Name }} </template></el-table-column>
        <el-table-column
          prop="Phone"
          label="货位"
          show-overflow-tooltip
          width="150"
        ><template v-slot="{row}">{{ row.PB_Location }} </template></el-table-column>
        <el-table-column
          prop="Fax"
          label="启用日期"
          show-overflow-tooltip
          width="220"
        ><template v-slot="{row}">{{ row.CreateTime }} </template></el-table-column>
        <el-table-column
          prop="Email"
          label="托盘状态"
          show-overflow-tooltip
          width="220"
        ><template v-slot="{row}">
          <span v-if="row.Status === 1">启用</span>
          <span v-else-if="row.Status === 0">停用</span>
        </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button v-if="scope.row.Status === 0" type="text" size="small" @click="qiyong(scope.row)">启用</el-button>
            <el-button v-else type="text" size="small" @click="qiyongs(scope.row)">停用</el-button>
            <el-button type="text" size="small" @click="handleClick(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="open(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table></div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" class="tan">
      <div class="tanchuangz">
        <el-form ref="form" :model="form" label-width="120px" :rules="rules">
          <el-form-item label="托盘号">
            <el-input v-model="form.Code" autocomplete="off" plain disabled />
          </el-form-item>
          <el-form-item label="托盘类型">
            <el-select v-model="form.TrayTypeId" placeholder="托盘类型">
              <el-option v-for="item in tuopanid" :key="item.id" :label="item.Name" :value="item.Id" />
            </el-select>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.Remarks" type="textarea" />
          </el-form-item>
        </el-form>
      </div>
      <div class="tanchuangy">
        <el-form ref="form" :model="form" label-width="120px" :rules="rules">
          <el-form-item label="托盘名称">
            <el-input v-model="form.Name" />
          </el-form-item>
          <el-form-item label="启用日期">
            <el-date-picker v-model="form.StartTime" type="date" placeholder="选择日期" style="width: 100%;" @change="hendledata" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="anniu">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="quedingxinz">确 定</el-button>
        <!-- <el-button v-else type="primary" @click="xiugai">修 改</el-button> -->
      </div>
    </el-dialog>
  </div></template>
<script>
import { shangExcel, ExportToExcel, gatList, SaveData, GetAllData, DisableTheData, EnableTheData, shanchu, bianji } from '@/api/tuopanGuanli'
import FileSaver from 'file-saver'
export default {
  name: 'TuopanGuanli',
  data() {
    return {
      typeinput: '',
      tuopanid: [],
      label: '',
      labels: '',
      data: [{
        Text: '',
        Children: [{
          Text: '',
          Children: [{
            Text: ''
          }]
        }]
      }],
      defaultProps: {
        Children: 'Children',
        label: 'Text'
      },
      currentPage: 1, // 初始页
      total: 5, // 分页总条数
      pageSize: 10, // 每页的数据
      value: '1',
      drawer: false,
      direction: 'rtl',
      list: [],
      select: {},
      input: '',
      www: '',
      loading: false,
      dialogTitle: '',
      xialakuang: '',
      xiazai: false,
      form: {
        StartTime: '',
        Name: '',
        Remarks: '',
        TrayTypeId: '',
        Status: Number
      },
      gongys: [],
      cangku: [],
      touliaodian: [],
      searchValue: '',
      dialogFormVisible: false,
      multipleSelection: '',
      danwei: [],
      rules: {
        Name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        Type: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ]
      },
      shanchus: [],
      arr: []
    }
  },
  async created() {
    this.listget()
    const res = await GetAllData()
    this.tuopanid = res
    console.log(res, '托盘类型')
  },
  methods: {
    async handleClick(row) {
      this.dialogFormVisible = true
      const res = await bianji({ id: row.Id })
      this.form = res
    },
    async open(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await shanchu([row.Id])
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.listget()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    chongzhi() {
      this.searchValue = ''
      this.typeinput = ''
      this.listget()
    },
    async chaxun() {
      const res = await gatList({ PageIndex: 1, PageRows: 10, search: { Keyword: this.searchValue, TypeName: this.typeinput }})
      this.list = res
      this.$message({
        type: 'success',
        message: '查询成功!'
      })
    },
    async qiyongs(row) {
      console.log(row)
      await DisableTheData({ id: row.Id })
      this.$message({
        type: 'success',
        message: '操作成功!'
      })
      this.listget()
    },
    async qiyong(row) {
      console.log(row)
      await EnableTheData({ id: row.Id })
      this.$message({
        type: 'success',
        message: '操作成功!'
      })
      this.listget()
    },
    hendledata() {
      const selected = new Date(this.selectedDate)
      const today = new Date()
      if (selected > today) {
        this.form.Status = 1
      } else {
        this.form.Status = 0
      }
    },
    async quedingxinz() {
      await SaveData(this.form)
      this.$message({
        type: 'success',
        message: '成功!'
      })
      this.dialogFormVisible = false
      this.listget()
    },
    xinjian() {
      this.dialogFormVisible = true
    },
    handleSelectionChange(val) {
      if (val.length > 0) {
        for (let i = 0; i < val.length; i++) {
          if (val[i].Id !== this.arr[i]) {
            this.arr.push(val[i].Id)
          }
        }
      } else {
        this.arr = val
      }
    },
    async shanc() {
      await shanchu(this.arr)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.listget()
    },
    async listget() {
      const res = await gatList({ PageIndex: 1, PageRows: 10, search: {}, SortField: 'id', SortType: 'asc' })
      this.list = res
      console.log(res, '数据列表')
    },

    shaxin() {
      this.loading = true
      this.listget()
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    daoru() {
      this.xiazai = true
    },
    shangchuan() {
      this.$refs['excel-upload-input'].click()
    },
    async xiazaimoban() {
      const res = await ExportToExcel()
      FileSaver.saveAs(res, '模板.xlsx')
    },
    async shangc(event) {
      const files = event.target.files
      if (files.length > 0) {
        const data = new FormData()
        files[0]
        data.append('file', files[0])
        await shangExcel(data)
      }
    }
  }
}
</script>
<style scoped>
.annius{
  margin-left: 30px;
  margin-top: 20px;
}
.anniu{
  position: relative;
  top: 1px;
  left: 0px;
}
.tan{
  height: 900px;
}
.beizhu{
  position: relative;
  top: -400px;
  left: 0px;
}
.tanchuangy{
  width: 450px;
  position: relative;
  top: -200px;
  left: 450px;
}
.tanchuangz{
  width: 450px;
}
.yeshu{
  margin-left: 1200px;
  margin-top: 20px;
}
.biaoge{
  margin-left: 30px;
  margin-top: 20px;
  width: 1590px;
}
.biaoges{
  margin-left: 30px;
  margin-top: 20px;
  width: 1200px;
}
.bianhao{
  width: 250px;
  margin-left: 10px;
}
.hezi {
  width: 1650px;
  margin: 20px auto;
  background: rgb(255, 255, 255);
}
.anniu {
  margin-left: 30px;
  margin-top: 20px;
}
.xiala {
  margin-top: 40px;
}
.anniu-a {
  margin-left: 1100px;
  margin-top: 20px;
}
.leixing{
  width: 250px;
}
.xialas{
  height: auto;
}
</style>
